<template>
	<div class="tabs" ref="tabs" @click.stop="handlerChange">
		<div class="tabs-item" v-for="(value, index) in MOBILE_TABS" :key="value" :class="{ 'is-active': index === 0 }">
			{{ value }}
		</div>
	</div>
</template>

<script setup>
	import { MOBILE_TABS } from '~/constant/modules/tabs';
	const tabsIns = useTemplateRef('tabs');
	const emits = defineEmits(['update:selected']);
	function handlerChange(e) {
		const target = e.target;
		if (!target.classList.contains('tabs-item')) {
			return;
		}
		tabsIns.value.querySelector('.is-active')?.classList?.remove('is-active');
		target.classList.add('is-active');
		emits('update:selected', target.innerText);
	}
</script>

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		height: 82px;
		@include flex(_, space-around);
        background-color: white;
		.tabs-item {
			position: relative;
			@include font(_, 30px, 34px, 700, #666666);
			&.is-active {
				color: var(--blog-tag-text-color);
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20px;
					width: 33px;
					height: 6px;
					background-color: var(--blog-box-bg-color-blue);
					border-radius: 94px;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
